Page({
  onShareAppMessage() {
    return {
      title: 'WXML节点布局相交状态',
      path: 'packageAPI/pages/page/intersection-observer/intersection-observer'
    }
  },

  data: {
    schema:[
      {
        label:'节点布局区域的左边界',
        prop:'left',
        type:'number',
        placeholder: '多个值用英文逗号隔开'
      },
      {
        label:'节点布局区域的右边界',
        prop:'right',
        type:'number',
      },
      {
        label:'节点布局区域的上边界',
        prop:'top',
        type:'number',
      },
      {
        label:'节点布局区域的下边界',
        prop:'bottom',
        type:'number',
      },
    ],
    formData:{
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    },
    title: '',
    result: '',
    remark: '',
    webUrl: '',
    theme: 'light',
    appear: false,
    observe: false
  },
  onLoad(options) {
    wx.setNavigationBarTitle({
      title: options.title,
    })

    this.setData({
      apiType: options.zh,
      title: options.title,
      zh:options.zh,
      remark: options.remark,
      webUrl: options.webUrl
    })
    this.setData({
      theme: wx.getSystemInfoSync().theme || 'light'
    })

    if (wx.onThemeChange) {
      wx.onThemeChange(({theme}) => {
        this.setData({theme})
      })
    }
  },
  onUnload() {
    this.choose2()
  },
  getFormData(e) {
    const formData = {}
    this.data.schema.forEach(item => {
      if(item.type === 'number') {
        formData[item.prop] = +e.detail.formData[item.prop]
      } else {
        formData[item.prop] = e.detail.formData[item.prop]
      }
    })
    console.log(formData, '=formData');
    this.setData({
      formData: formData
    })
  },
  choose1() {
    if(this._observer) {
      this._observer.disconnect()
      this._observer = null
    }
    this._observer = wx.createIntersectionObserver(this)
    this._observer.relativeToViewport(this.data.formData).observe('.ball', (res) => {
      console.log(res, '====res');
      wx.showToast({
        title: '执行回调输出结果',
        duration: 500
      })
      this.setData({
        appear: res.intersectionRatio > 0,
        result: res
      })
    })
  },
  choose2() {
    if (this._observer) this._observer.disconnect()
  }
})
